<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="news-card flex bg-white px-20rpx py-16rpx">
    <view class="mr-20rpx" v-if="item.image">
      <wd-img :src="item.image" height="100" width="120"></wd-img>
    </view>
    <view class="news-card-content flex flex-col justify-between flex-1">
      <view class="flex justify-start">
        <view class="news-card-content-title text-base font-bold">{{ item.name }}</view>
        <view class="text-22rpx">({{ item.redeem_point }}积分)</view>
      </view>

      <view class="news-card-content-intro text-gray-400 text-sm mt-16rpx">
        {{ item.description }}
      </view>
      <view class="text-muted text-xs w-full flex justify-between mt-12rpx">
        <view>{{ item.deadline }}</view>
        <view class="flex items-center">
          <view class="ml-10rpx">{{ item.num }}张</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    item: any
  }>(),
  {
    item: {},
  },
)
</script>

<style lang="scss" scoped>
.news-card {
  border-bottom: 1px solid #f8f8f8;

  &-content {
    &-title {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &-intro {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
